<template>
  <div class="head-page">
    <div class="top-mid">
      <el-col :span="6" :offset="3">
        <div class="head-left">
          <ul>
            <li><span class="name">全景李沧</span></li>
            <li><span class="name">数字政府</span></li>
            <li><span class="name">数字社会</span></li>
          </ul>
        </div>
      </el-col>
      <el-col :span="6">
        <span class="title">李沧城市云脑中枢</span>
      </el-col>
      <el-col :span="6">
        <div class="head-right">
          <ul class="fr">
            <li><span class="name">数字经济</span></li>
            <li @mouseover="handleOver()">
              <span class="name">{{ activeTitle }}</span>
              <div ref="menuDropRef" class="subBox" backgroundColor="#3b3b84" @mouseout="handleOut()">
                <div class="item" v-for="(item, index) in routeList" :class="{ active: isActive === index }" :key="item.path">
                  <!-- 权限控制 <router-link :to="item.path">{{ item.meta.title }}</router-link> -->
                  <router-link :to="item.path">{{ item.name }}</router-link>
                </div>
                <div class="item"><p @click="goPage">农业农村场景</p></div>
              </div>
            </li>
            <li>
              <span class="name">数据运行</span>
            </li>
          </ul>
        </div>
      </el-col>
    </div>

    <!-- <el-col :span="8">
      <div class="head-left">
        <ul>
          <li><span class="name">全景李沧</span></li>
          <li><span class="name">数字政府</span></li>
          <li><span class="name">数字社会</span></li>
        </ul>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="top-mid"><span class="title">李沧城市云脑中枢</span></div>
    </el-col>
    <el-col :span="8">
      <div class="head-right">
        <ul class="fr">
          <li><span class="name">数字经济</span></li>
          <li @mouseover="handleOver()">
            <span class="name">{{ activeTitle }}</span>
            <div ref="menuDropRef" class="subBox" backgroundColor="#3b3b84" @mouseout="handleOut()">
              <div class="item" v-for="(item, index) in routeList" :class="{ active: isActive === index }" :key="item.path">
                <router-link :to="item.path">{{ item.meta.title }}</router-link>
              </div>
              <div class="item"><p @click="goPage">农业农村场景</p></div>
            </div>
          </li>
          <li>
            <span class="name">数据运行</span>
          </li>
        </ul>
      </div>
    </el-col> -->
  </div>
</template>
<script>
// import { getRouters } from '@/utils/auth'
export default {
  data() {
    return {
      activeTitle: this.title,
      isActive: 2,
      // routeList: [],
      routeList: [
        {
          path: '/gov',
          name: '政务服务场景',
        },
        {
          path: '/hsindex',
          name: '疫情防控场景',
        },
        {
          path: '/enterprise',
          name: '企业服务场景',
        },
        {
          path: '/project',
          name: '工程建设场景',
        },
        {
          path: '/food-safety',
          name: '食品安全场景',
        },
        {
          path: '/wt-tourism',
          name: '文体旅游场景',
        },
        {
          path: '/approval',
          name: '审批服务场景',
        },
        {
          path: '/training',
          name: '培训教育场景',
        },
        {
          path: '/health',
          name: '卫生健康场景',
        },
        {
          path: '/dangerous',
          name: '危化品场景',
        },
        {
          path: '/traffic',
          name: '交通运输场景',
        },
        {
          path: '/hr',
          name: '人力资源场景',
        },
        {
          path: '/safe-production',
          name: '安全生产场景',
        },
        {
          path: '/wisdom',
          name: '智慧社区场景',
        },
        {
          path: '/colliery',
          name: '非煤矿山场景'
        },
        {
          path: '/school',
          name: '学校疫情场景'
        },
      ],
    }
  },
  props: {
    title: {
      type: String,
      default: () => '专题场景',
    },
  },
  created() {
    // const list = JSON.parse(getRouters())
    // this.routeList = list
  },
  mounted() {
    let index = 2
    index = this.routeList.findIndex((v) => v.path == this.$route.path)
    this.isActive = index != -1 ? index : 2
  },
  methods: {
    //鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = 'block'
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = 'none'
    },
    goPage() {
      window.location.href = 'http://tip-dp.litec.top:81/transferPage?otherToken=7vgdea3iyonyynrj9p0u6xcm40dtbvbt'
    },
  },
}
</script>
<style scoped lang="less">
.head-page {
  width: 100%;
  height: 86px;
  pointer-events: auto;
  position: absolute;
  // display: flex;
  // align-items: center;
  padding: 0 50px;
  box-sizing: border-box;
  .subBox {
    width: 148px;
    // padding-top: 24px;
    // -webkit-box-sizing: border-box;
    // box-sizing: border-box;
    // margin-top: -12px;
    background: rgba(68, 123, 235, 0.4);
    border: 1px solid #091646;
    display: none;
    padding: 15px 0;
    border-radius: 5px;
    height: auto;
    .item {
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      color: #fff;
      a {
        color: #fff;
      }
    }
    .item.active {
      background: rgba(68, 123, 235, 0.98);
    }
  }
  .head-right .fr {
    li {
      // background-image: url('../../assets/image/headers/bg2.png');
    }
  }
  .head-left {
    ul li {
      text-align: right;
    }
  }
  .head-left,
  .head-right {
    ul {
      display: flex;
      margin-top: 16px;
    }
    ul li {
      // background: #091646;
      // border: 2px solid #103f7b;
      // width: 33%;
      // font-weight: 400;
      // color: #fff;
      // font-size: 18px;
      // margin: 0 12px;
      // line-height: 40px;
      // cursor: pointer;
      position: relative;
      z-index: 1;
      width: 280px;
      height: 45px;
      // background-image: url('../../assets/image/headers/bg1.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      text-align: center;
      cursor: pointer;
      position: relative;
      .name {
        font-size: 20px;
        font-weight: 400;
        color: #fff;
        line-height: 47px;
      }
    }
  }
  .top-mid {
    width: 100%;
    height: 60px;
    // background: url('../../assets/image/headers/top.png') top no-repeat; 
    background: url('../../assets/image/headers/top-new.png') top no-repeat; 
    background-size: 100% 100%;
    position: relative;
    top: 15px;
    .title {
      font-size: 35px;
      font-family: "黑体";
      font-weight: 700;
      color: #FFFFFF;
      // color: #7dfcfe;
      line-height: 60px;
      letter-spacing: 3px;
      // background: linear-gradient(0deg, rgba(255, 255, 255, 0.73) 44.7998046875%, rgba(68, 123, 235, 0.4) 100%);
      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
    }
  }
}
</style>
